﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地图图层</title>
    <link rel="stylesheet" type="text/css" href="~/Assets/DashBoard/css/reset.css" />
    <link type="text/css" href="~/Assets/DashBoard/css/ft-carousel.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="~/Assets/DashBoard/css/reset.css" />
    <link type="text/css" href="~/Assets/Styles/others/an-skill-bar.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="~/Assets/DashBoard/css/animsition.css" />
    <link rel="stylesheet" type="text/css" href="~/Assets/DashBoard/css/jquery.shCircleLoader.css" />
    <link href="~/Assets/Styles/libs/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Assets/Styles/libs/bootstrap.css" rel="stylesheet" />
    <link href="~/Assets/Styles/libs/bootstrap-select.css" rel="stylesheet" />
    <link href="~/UIAssets/plugins/switchery/switchery.min.css" rel="stylesheet" />
    <link href="~/Assets/DashBoard/css/video-js.min.css" rel="stylesheet" />
    <link href="~/Assets/Styles/libs/global.css" rel="stylesheet" />
    <link type="text/css" href="~/Assets/Styles/pg/oa.css" rel="stylesheet" />
    <link href="~/UIAssets/css/font-awesome.min.css" rel="stylesheet" />
    <link href="~/UIAssets/css/simple-line-icons.css" rel="stylesheet" />
    <link type="text/css" href="~/Assets/Styles/pg/monitor.css" rel="stylesheet" />
    <link type="text/css" href="~/Assets/Styles/menubar/sidebar.css" rel="stylesheet" />
    <link type="text/css" href="~/Assets/Styles/pg/monitorOther.css" rel="stylesheet" />
    <style type="text/css">

        .div-a {
            position: absolute;
        }

        .detail_text {
            display: none;
            font-size: 24px;
        }

        .detail_div {
            background-color: rgba(0,0,0,0.5);
            color: #FFF;
            border-radius: 4px;
            z-index: 999;
            position: absolute;
            width: 500px;
        }

        .titleShow {
            max-width: 266px;
            position: absolute;
            font: 15px/1.5 "微软雅黑" bold;
            color: #fff;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -o-box-shadow: 2px 1px 7px rgba(0,0,0,.3);
            -moz-box-shadow: 2px 1px 7px rgba(0,0,0,.3);
            -webkit-box-shadow: 2px 1px 7px rgba(0,0,0,.3);
            padding: 7px;
            background: #222 url(http://ww2.sinaimg.cn/mw690/70f52a24gw1e9w0u9cti1j205a04djri.jpg) 0 0 repeat;
            word-break: break-word;
        }

        h1 {
            font-family: "microsoft yahei";
            font-size: 18px;
            text-align: center;
            padding: 12px 0 16px 0;
            display: block;
            background: url("../Assets/dashboard/images/bg01top.png") center bottom no-repeat;
            position: absolute;
            top: 10px;
            width: 100%;
            color: white;
        }

        .menu_btn {
            margin-top: 40px;
            cursor: pointer;
            box-sizing: border-box;
            border: 2px solid red;
            border-image: url(../Assets/DashBoard/images/border.png) 51 38 21 132;
            border-width: 1.125rem 1.583rem 0.875rem 2.5rem;
            width: 150px;
            height: 50px;
            font-size: 20px;
            font-weight: bold;
        }

            .menu_btn a {
                display: block;
                cursor: pointer;
                text-align: center;
            }
        .menu-active {
            color: white;
            font-weight: bold;
        }
    </style>

</head>
<body style="height:100%;overflow:hidden;" ng-app="Emergency">
    <div id="loader"></div>


    <div class="scanboardWp animsition" ng-controller="EmergencyController" ng-init="
         FactoryArea=2;
         GetChemicalLocation(FactoryArea);GetJobHazardLocation(FactoryArea);GetFireControlLocation(FactoryArea);GetDangerPlaceLocation(FactoryArea);
         GetLocation(FactoryArea);ShowChemical();ShowFireControl();ShowJobHazard();ShowWasteWaterExhaust();ShowDangerPlace();ShowHiddenTrouble();GetLocationNowData();GetConstructionWork();ShowDangerWork();">
        <div id="main" class="wp clearfix" style="margin:0 auto; padding:0px;width:100%;">
            <a href="../Emergency/Index" style="background:none;font-size:30px;width:10%;position:absolute; font-size:20px;top:80px;left:10px;"><span class="glyphicon glyphicon-home"></span></a>
            <h1 style="font-size:28px;">&nbsp;&nbsp;智慧管控平台</h1>
            <div style="width:100%;margin:0 auto;">
                <div class="centerWp" style="margin:0 auto; padding:0px;width:100%;">
                    <!--中间大地图-->
                    <p style="position:absolute;top:20px;right:40px;font-size:18px;font-weight:bold;"><a href="Part2">[切换厂区]</a></p>
                    <div class="mapContainer" style="width:1920px;">
                        <div ng-repeat="location in LocationList">
                            <div class="div-a" ng-style="{'left':location.X+'%','top':location.Y+'%'}" ng-show="location.Type==1 && IsShowPort">
                                <div ng-mouseover="doMapMouse('Water',location.Id)" ng-mouseleave="MouseLeave('Water',location.Id)" style="color: #FFF;font-size:12px; border-radius:4px;">
                                    <a class="titlediv" style="color:gainsboro;" title="{{location.LocationName}}">
                                        <img src="~/Images/Monitor/wastewater_1.png" width="50" />
                                    </a>
                                </div>
                                <div class="detail_div">
                                    <div id="Water{{location.Id}}" class="detail_text">
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{location.LocationName}}</span></span><br />
                                        <p style="top: -2px; position: relative;padding:5px;margin:0px;padding:0px;" ng-repeat="y in LocationNowData" ng-show="y.Id==location.Id"><span class="glyphicon glyphicon-play"> </span><b>{{y.Env_ConfigName}}：</b><span>{{y.Values}}</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div ng-repeat="location in LocationList">
                            <div class="div-a" ng-style="{'left':location.X+'%','top':location.Y+'%'}" ng-show="location.Type==2 && IsShowPort">
                                <div ng-mouseover="doMapMouse('Exhaust',location.Id)" ng-mouseleave="MouseLeave('Exhaust',location.Id)" style="color: #FFF;font-size:12px; border-radius:4px;">
                                    <a class="titlediv" style="color:gainsboro;" title="{{location.LocationName}}">
                                        <img src="~/Images/Monitor/exhaust_1.png" width="50" />
                                    </a>
                                </div>
                                <div class="detail_div">
                                    <div id="Exhaust{{location.Id}}" class="detail_text">
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{location.LocationName}}</span></span><br />
                                        <p style="top: -2px; position: relative;padding:5px;margin:0px;padding:0px;" ng-repeat="y in LocationNowData" ng-show="y.Id==location.Id"><span class="glyphicon glyphicon-play"> </span><b>{{y.Env_ConfigName}}：</b><span>{{y.Values}}</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div ng-repeat="location in LocationList">
                            <div class="div-a" ng-style="{'left':location.X+'%','top':location.Y+'%'}" ng-show="location.Type==5">
                                <div style="font-size:12px; border-radius:4px;cursor:pointer;">
                                    <a class="titlediv" style="color:gainsboro;" title="{{location.LocationName}}">{{location.SimpleName}}</a>
                                </div>
                            </div>
                        </div>
                        @*<div ng-repeat="location in LocationList">
                            <div class="div-a" ng-style="{'left':location.X+'%','top':location.Y+'%'}" ng-show="location.Type==4 && IsDangerPlace">
                                <div style="color: #FFF;font-size:12px; border-radius:4px;">
                                    <a class="titlediv" style="color:gainsboro;" title="{{location.LocationName}}">
                                        <img src="~/Images/Monitor/dangerplace.png" width="40" />
                                    </a>
                                </div>
                            </div>
                        </div>*@
                        <div ng-repeat="location in ChemicalLocation">
                            <div class="div-a" ng-mouseover="doMapMouse('Chemical',location.LocationId)" ng-mouseleave="MouseLeave('Chemical',location.LocationId)" ng-style="{'left':location.X+'%','top':location.Y+'%'}" ng-show="IsChemical">
                                <div style="color: #FFF;font-size:12px; border-radius:4px;z-index:1;">
                                    <a class="titlediv" style="color:gainsboro;">
                                        <img src="~/Images/Monitor/chemical.png" width="40" />
                                    </a>
                                </div>
                                <div class="detail_div">
                                    <div id="Chemical{{location.LocationId}}" class="detail_text">
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{location.LocationName}}</span></span><br />
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>主要危化品：</b><span>{{location.Chemical}}</span></span><br />
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>责任部门：</b><span>{{location.DepartmentName}}</span></span><br />
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>负责人：</b><span>{{location.Administrator}} {{location.Phone}}</span></span><br />
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>盘点时间：</b><span>2020/12/31</span></span><br />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div ng-repeat="location in FireControlLocation">
                            <div class="div-a" ng-mouseover="doMapMouse('FireControl',location.LocationId)" ng-mouseleave="MouseLeave('FireControl',location.LocationId)" ng-style="{'left':location.X+'%','top':location.Y+'%'}" ng-show="IsFireControl">
                                <div style="color: #FFF;font-size:12px; border-radius:4px;">
                                    <a class="titlediv" style="color:gainsboro;">
                                        <img src="~/Images/Monitor/firecontrol.png" width="40" />

                                    </a>
                                </div>
                                <div class="detail_div">
                                    <div id="FireControl{{location.LocationId}}" class="detail_text">
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{location.FireControlPlaceName}}</span></span><br />
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>责任部门：</b><span>{{location.DepartmentName}}</span></span><br />
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>消防负责人：</b><span>{{location.Administrator}}</span></span><br />
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>联系方式：</b><span>{{location.Phone}}</span></span><br />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div ng-repeat="location in JobHazardLocation">
                            <div class="div-a" ng-style="{'left':location.X+'%','top':location.Y+'%'}" ng-show="IsJobHazard">
                                <div ng-mouseover="doMapMouse('JobHazard',location.LocationId)" ng-mouseleave="MouseLeave('JobHazard',location.LocationId)" style="color: #FFF;font-size:12px; border-radius:4px;">
                                    <a class="titlediv" style="color:gainsboro;">
                                        <img src="~/Images/Monitor/jobhazard.png" width="40" />
                                    </a>
                                </div>
                                <div class="detail_div">
                                    <div id="JobHazard{{location.LocationId}}" class="detail_text">
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{location.LocationName}}</span></span><br />
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>危害因素：</b><span>{{location.HazardFactors}}</span></span><br />
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>接触工种：</b><span>{{location.JobTitle}}</span></span><br />
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>检测数值：</b><span>0.12mg/m³</span></span><br />
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>检测时间：</b><span>2020-10-22 09:00</span></span><br />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div ng-repeat="location in DangerPlaceList">
                            <div class="div-a" ng-style="{'left':location.X+'%','top':location.Y+'%'}" ng-show="IsDangerPlace">
                                <div ng-mouseover="doMapMouse('DangerPlace',location.Id)" ng-mouseleave="MouseLeave('DangerPlace',location.Id)" style="color: #FFF;font-size:12px; border-radius:4px;">
                                    <a class="titlediv" style="color:gainsboro;">
                                        <img src="~/Images/Monitor/dangerplace.png" width="40" />
                                    </a>
                                </div>
                                <div class="detail_div">
                                    <div id="DangerPlace{{location.Id}}" class="detail_text">
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{location.Location}}</span></span><br />
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>设备：</b><span>{{location.Name}}</span></span><br />
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>危险等级：</b><span>{{location.DangerousLevel}}</span></span><br />
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>数量：</b><span>{{location.CountNum}}</span></span><br />
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>责任部门：</b><span>{{location.Department}}</span></span><br />
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>现场责任人：</b><span>{{location.Administror}}-{{location.AdminContact}}</span></span><br />
                                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>部门责任人：</b><span>{{location.DepartmentAdmin}}-{{location.DepartmentContact}}</span></span><br />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div ng-repeat="location in ConstructionWorkList">
                            <div class="div-a" ng-style="{'left':location.XAxis+'%','top':location.YAxis+'%'}" ng-show="IsDangerWork && location.FactoryAreaId!=FactoryArea">
                                <div ng-mouseover="doMapMouse('ConstructionWork',location.FloorConstructionWorkRecordId)" ng-mouseleave="MouseLeave('ConstructionWork',location.FloorConstructionWorkRecordId)" style="color: #FFF;font-size:12px; border-radius:4px;">
                                    <a class="titlediv" style="color:gainsboro;">
                                        <img ng-cloak ng-show="location.Type==1" src="~/Assets/Images/ic_1.png" width="50" />
                                        <img ng-cloak ng-show="location.Type==2" src="~/Assets/Images/ic_2.png" width="50" />
                                        <img ng-cloak ng-show="location.Type==3" src="~/Assets/Images/ic_3.png" width="50" />
                                        <img ng-cloak ng-show="location.Type==4" src="~/Assets/Images/ic_4.png" width="50" />
                                    </a>
                                </div>
                                <div class="detail_div">
                                    <div id="ConstructionWork{{location.FloorConstructionWorkRecordId}}" class="detail_text">
                                        <span style="top: -2px; position: relative;"><i class="fa fa-sitemap">:</i><span>{{location.Company}}</span></span><br />
                                        <span style="top: -2px; position: relative;"><i class="glyphicon glyphicon-map-marker">:</i><span>{{location.Place}}</span></span><br />
                                        <span style="top: -2px; position: relative;"><i class="icon-users">:</i><span>{{location.OperationPerson}}</span></span><br />
                                        <span style="top: -2px; position: relative;"><span class="glyphicon glyphicon-wrench">:</span><span>{{location.Content}}</span></span><br />
                                        <span style="top: -2px; position: relative;"><span class="glyphicon glyphicon-time">:</span><span>{{location.StartTime}}</span></span><br />
                                        <span style="top: -2px; position: relative;"><span class="glyphicon glyphicon-time">:</span><span>{{location.EndTime}}</span></span><br />
                                        <span style="top: -2px; position: relative;"><span class="glyphicon glyphicon-user">:</span><span>{{location.FieldPerson}}</span></span><br />
                                        <span style="top: -2px; position: relative;"><span class="glyphicon glyphicon-flag">:</span><span>{{location.FieldDepartment}}</span></span><br />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="menu_list" style="position:absolute;left:5px; top:100px;">
                            <div><a></a></div>
                            <div class="menu_btn"><a ng-class="{'menu-active' :IsDangerPlace}" ng-click="ControlCenter('IsDangerPlace');">危险点</a></div>
                            <div class="menu_btn"><a href="Part4">智慧消防</a></div>
                            <div class="menu_btn"><a ng-class="{'menu-active' :IsDangerWork}" ng-click="ControlCenter('IsDangerWork');">危险作业</a></div>
                            <div class="menu_btn"><a ng-class="{'menu-active' :IsChemical}" ng-click="ControlCenter('IsChemical');">危化品管控</a></div>
                            <div class="menu_btn"><a ng-class="{'menu-active' :IsShowPort}" ng-click="ControlCenter('IsShowPort');">污染物排放</a></div>
                            <div class="menu_btn"><a>重点设备</a></div>
                            <div class="menu_btn"><a>预测预警</a></div>
                        </div>
                        <div ng-cloak><img style="width:100%;" ng-show="FactoryArea==1" ng-src="~/Assets/DashBoard/images/pvg.png" /></div>
                        <div ng-cloak><img style="width:100%;" ng-show="FactoryArea==2" ng-src="~/Assets/DashBoard/images/dcArea.jpg" /></div>

                        <div style="background-color: rgba(0,0,0,0.5);color: #FFF;font-size:12px; width:100%; height:40px; border-radius:4px;position:absolute;left:0;bottom:50px;padding:2px;font-size:20px;padding-left:50px; display:none;">
                            <input type="checkbox" id="chk_dangerplace" style="-webkit-appearance:checkbox;width:20px;zoom:150%;" ng-click="ShowDangerPlace();" />危险点 &nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="checkbox" id="chk_firecontrol" style="-webkit-appearance:checkbox;width:20px;zoom:150%;" ng-click="ShowFireControl();" />消防 &nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="checkbox" id="chk_wastewaterandexhaust" style="-webkit-appearance:checkbox;width:20px;zoom:150%;" ng-click="ShowWasteWaterExhaust();" />排放 &nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="checkbox" id="chk_chemical" style="-webkit-appearance:checkbox;width:20px;zoom:150%;" ng-click="ShowChemical();" />危化品 &nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="checkbox" id="chk_jobhazard" style="-webkit-appearance:checkbox;width:20px;zoom:150%;" ng-click="ShowJobHazard();" />职业危害 &nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="checkbox" id="chk_dangerwork" style="-webkit-appearance:checkbox;zoom:150%;" ng-click="ShowDangerWork();" />危险作业 &nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <img-swiper imglist="" style=""></img-swiper>
</body>
@*<script type="text/javascript" src="~/Assets/DashBoard/js/bg.js"></script>*@
<script type="text/javascript" src="~/Assets/DashBoard/js/jquery.min.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/jquery.shCircleLoader-min.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/ft-carousel.min.js"></script>
<script src="~/Assets/Scripts/libs/bootstrap.min.js"></script>
<script src="~/Assets/Scripts/libs/bootstrap-select.js"></script>
<script src="~/Assets/Scripts/base/angular.js"></script>
<script src="~/Assets/Scripts/pg/Emergency.js"></script>
<script src="~/UIAssets/plugins/switchery/switchery.min.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/scanboard.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/fontscroll.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/jquery.animsition.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/jquery.nicescroll.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/echarts.min.js"></script>
<script src="~/Assets/DashBoard/js/video.min.js"></script>
<script type="text/javascript">
    $('#loader').shCircleLoader({ color: "#00deff" });

    setTimeout(function () {
        titleShow();
    }, 10000);
    function titleShow() {
        var oTitle = null;
        var sTitle = null;
        var aA = document.getElementsByClassName('titlediv');
        for (var i = 0; i < aA.length; i++) {
            if (aA[i].title) {//假如a标签中存在title的话
                aA[i].onmouseover = function (ev) {
                    sTitle = this.title;
                    this.title = '';
                    oTitle = document.createElement('div');
                    oTitle.className = 'titleShow';
                    oTitle.innerHTML = sTitle;
                    document.body.appendChild(oTitle);
                };
                aA[i].onmousemove = function (ev) {
                    var ev = ev || window.event;
                    oTitle.style.left = ev.clientX + 10 + 'px';//获取鼠标所在x座标并增加10个像素,下同
                    oTitle.style.top = ev.clientY + 10 + 'px';
                }
                aA[i].onmouseout = function () {
                    this.title = sTitle;
                    document.body.removeChild(oTitle);
                }
            }
        }
    }
</script>

</html>



